<template>
  <div class="container">
    <div class="panel">
      <a-space direction="vertical" :size="32">
        <DataPanel />
        <ContentChart />
      </a-space>
    </div>
    <a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }">
        <PopularContent />
      </a-grid-item>
      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }">
        <CategoriesPercent />
      </a-grid-item>
    </a-grid>
  </div>
</template>

<script lang="ts" setup>
import DataPanel from "./components/data-panel.vue"
import ContentChart from "./components/content-chart.vue"
</script>

<script lang="ts">
export default {
  name: "Dashboard"
}
</script>

<style lang="scss" scoped>
.container {
  padding: 16px 20px;
  padding-bottom: 0;
  background-color: var(--color-fill-2);
}
</style>
